<!-- 分割卡槽 -->
<template>
  <view class="mxp-gap" :class="cusClass" :style="[{ backgroundColor: background, height, marginTop, marginBottom }, cusStyle]"></view>
</template>

<script lang="ts" setup>
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import type { PropType } from 'vue';
  import type { $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  defineOptions({
    name: 'mxp-gap',
  });

  defineProps({
    /** 背景颜色(默认transparent) */
    background: { type: String, default: 'transparent' },
    /** 分割槽高度，单位px(默认20) */
    height: { type: String as PropType<$SizeUnitStr>, default: '20px' },
    /** 与上一个组件的距离 */
    marginTop: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    /** 与下一个组件的距离 */
    marginBottom: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    ...publicStyeProps,
  });
</script>
